<template>
  <div class="lottie">
    <div class="lottie-box" ref="box"></div>
  </div>
</template>

<script>
import lottie from 'lottie-web'

const CONFIG = {
  split: '分割线1和3.json',
  split2: '分割线2.json',
  // blockL1: '角背景框-左1地图-2.json',
  blockL1: '地图边框.json',
  blockL2: '角背景框-左2-2.json',
  blockL3: '角背景框-左3.json',
  blockR1: '角背景框-右1-2.json',
  blockR2: '角背景框-右2-2.json',
  titleL: '通用标题.json',
  titleR: '通用标题.json',
  rccljg: '人才存量结构.json',
  rclrzs: '人才流入总数.json',
  jszcfb: '技术职称分布.json',
  jszcfb350: '技术职称350.json',
  header: '头部.json',
  bottom: 'bottom.json',
  rczc: '人才支撑边框.json',
  rczpbk: '人才招聘框.json',
  fbbk: '边框学历分布_年龄分布_技术职称分布.json',
  kckjbjk: '科创空间背景框.json',
  header2: '头部32比9.json',
  cxpt_32: '32人才支撑创新平台.json',
  fbbk32: '32学历年龄技术职称分布.json',
  eastBg: '背景边框-地图.json'
}
const PREFIX = '/lottie/'

export default {
  name: 'lottie',
  props: {
    src: String,
    name: String,
    renderer: {
      type: String,
      default: 'svg'
    }
  },
  data() {
    return {}
  },
  methods: {
    init() {
      const url = this.src || CONFIG[this.name]
      this.lottie = lottie.loadAnimation({
        container: this.$refs.box,
        renderer: this.renderer,
        loop: true,
        path: PREFIX + url
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.lottie {
}
</style>
